.AIChat {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 90% 10%;
  .chatArea {
    display: flex;
    flex-direction: column;
    padding: 10px;
    .chatBubble {
      max-width: 70%;
      margin: 5px;
      padding: 10px;
      border-radius: 8px;
      word-wrap: break-word;
    }

    .left {
      align-self: flex-start;
      background-color: #d3d3d3; /* 灰色背景，用于AIContent消息 */
    }

    .right {
      align-self: flex-end;
      background-color: #007bff; /* 蓝色背景，用于myContent消息 */
      color: #fff; /* 白色字体 */
    }
  }
  .inputArea {
    display: flex;
    align-items: center;
    justify-content: center;
    .input {
      display: grid;
      grid-template-columns: 60px 79% 11%;
      width: 90%;
      height: 58%;
      .inputEmoji {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .inputIcon {
        width: 54px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
